let width = document.getElementById("width");
let width_v = document.getElementById("width-v");
let height = document.getElementById("height");
let height_v = document.getElementById("height-v");
let wh = document.getElementById("wh");
let wh_v = document.getElementById("wh-v");

(async () =>{
    await loadData();
})();
async function loadData(){
    let values = await browser.storage.local.get();
    if (values.width)
        width.value = values.width;
    else{
        width.value = 50;
        browser.storage.local.set({"width": 50});
    }
    if (values.height)
        height.value = values.height;
    else{
        height.value = 50;
        browser.storage.local.set({"height": 50});
    }
    wh.value = width.value;
    width_v.innerHTML = width.value;
    wh_v.innerHTML = width.value;
    height_v.innerHTML = height.value;
}

// browser.storage.local.onChanged.addListener(()=>{
//     loadData();
// })

width.addEventListener("input", () =>{
    width_v.innerHTML = width.value;
    browser.storage.local.set({"width": width.valueAsNumber});
});
height.addEventListener("input", () =>{
    height_v.innerHTML = height.value;
    browser.storage.local.set({"height": height.valueAsNumber});
});

wh.addEventListener("input", () =>{
    wh_v.innerHTML = wh.value;
    browser.storage.local.set({"width": wh.valueAsNumber});
    browser.storage.local.set({"height": wh.valueAsNumber});
});